<template>
  <el-select v-model="checkedCitiesTempArr" multiple filterable collapse-tags placeholder="请选择" :disabled="disabled"
    @visible-change="visibleChange">
    <el-option :value="city" v-for="(city, i) in cities" :label="city" :key="city">
      <el-checkbox v-model="checkAllData[i]" @change="(val) => checkboxChange(val, i)">{{ city }}</el-checkbox>
    </el-option>
    <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkedCitiesTemp" @change="handleCheckedCitiesChange">
      
    </el-checkbox-group> -->
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      // checkAll: false,
      checkAllData: [],
      // checkedCities: ['上海', '北京'],
      cities: this.cityOptions,
      checkedCitiesTempArr: [],
      // isIndeterminate: true,
      // checkedCitiesTemp: [],
    };
  },
  props: {
    cityOptions: {
      type: Array,
      default: () => [],
    },
    checkedCitiesTemp: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
    // checkedCities: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  // 设置绑定参数
  model: {
    prop: 'checkedCitiesTemp',
    event: 'selected',
  },
  watch: {
    checkedCitiesTemp: {
      handler(val) {
        let a = this.cities.map((item) => {
          return val.indexOf(item) > -1;
        });
        this.checkedCitiesTempArr = val
        this.checkAllData = a
      },
      immediate: true,
      deep: true,
    },
    cityOptions: {
      handler(val) {
        this.cities = val
      },
      deep: true,
    }
  },
  computed: {
    // checkAllData() {
    //   return this.cities.map(item=> {
    //     return this.checkedCitiesTemp.indexOf(item) > -1
    //   })
    // }
  },
  methods: {
    // handleCheckAllChange(val) {
    //   this.checkedCitiesTemp = val ? cityOptions : [];
    //   this.isIndeterminate = false;
    // },
    // handleCheckedCitiesChange(value) {
    //   let checkedCount = value.length;
    //   this.checkAll = checkedCount === this.cities.length;
    //   this.selectValue = value;
    //   this.isIndeterminate =
    //     checkedCount > 0 && checkedCount < this.cities.length;
    // },
    checkboxChange(val, i) {
      if (val) {
        if (i == 0) {
          this.checkedCitiesTempArr = this.cities;
          this.checkAllData = this.cities.map(() => true);
        } else {
          this.checkedCitiesTempArr.push(this.cities[i]);
        }
      } else {
        if (i == 0) {
          this.checkedCitiesTempArr = [];
          this.checkAllData = this.cities.map(() => false);
        } else {
          this.checkedCitiesTempArr = this.checkedCitiesTempArr.filter(
            (el) => el !== this.cities[i]
          );
        }
      }
      this.$emit('selected', this.checkedCitiesTempArr);
    },
    visibleChange(val) {
      // if(!val) {
      //   this.$emit('selected', this.checkedCitiesTempArr);
      // }
    }
  },
};
</script>
<style scoped>
.el-checkbox {
  display: block;
}

::v-deep .el-tag.el-tag--info .el-tag__close {
  display: none;
}
</style>